<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageInfo.pageIndex"
    :page-sizes="[5, 10, 50, 100]"
    :page-size="pageInfo.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageInfo.totalCount"
    background
  >
    <!-- background背景属性 -->
  </el-pagination>
</template>

<script>
export default {
  props: {
    pageInfo: {
      pageIndex: 1,
      pageSize: 5,
      totalCount: 0
    }
  },
  emits: ["handleSizeChange", "handleCurrentChange"],
  methods: {
    // 监听pageSize改变的事件
    handleSizeChange(newPageSize) {
      this.$emit("handleSizeChange", newPageSize);
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPageIndex) {
      this.$emit("handleCurrentChange", newPageIndex);
    }
  }
};
</script>

<style lang="less" scoped></style>
